<template>
  <div class="personal">
    <el-col :span="4" style="margin: 40px">
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="$router.push('/personal')">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>个人资料</span>
          <el-dialog
              v-model="dialogFormVisible"
              title="创建文章"
              style="border-radius: 20px"
          >
            <el-form :model="articleForm">
              <el-form-item label="文章名称:" :label-width="formLabelWidth">
                <el-input v-model="articleForm.title" autocomplete="off" placeholder="请输入文章名称"/>
              </el-form-item>

              <el-form-item label="文章内容:" :label-width="formLabelWidth">
                <el-input
                    v-model="articleForm.content"
                    autocomplete="off"
                    type="textarea"
                    :autosize="{ minRows: 10, maxRows: 1000 }" size="large"
                    placeholder="请输入文章内容"
                />
              </el-form-item>
              <el-form-item label="创建日期:" :label-width="formLabelWidth">
                  <el-input v-model="articleForm.createDate" autocomplete="off" disabled/>
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;addArticle()">
                  确定
                </el-button>
              </span>
            </template>
          </el-dialog>
        </el-menu-item>
        <el-menu-item index="2" @click="$router.push('/personal/favorites')">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>收藏夹</span>
        </el-menu-item>
        <el-menu-item index="3" @click="$router.push('/personal/my')">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>我的文章</span>
        </el-menu-item>
        <el-menu-item index="4" @click="dialogFormVisible = true">
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>创建文章</span>
        </el-menu-item>
      </el-menu>
    </el-col>

    <Router-view></Router-view>
  </div>
  <LayoutFooter></LayoutFooter>
</template>
<script setup>
import { ref} from "vue";
import {createArticle, getUserlArticle} from "@/apis/article";
import {ElMessage} from "element-plus";


const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const articleForm = ref({
  title: '', content: '', createDate: ''
});

const date = () => {
  let date = new Date();
  let year = date.getFullYear()
  let mon = date.getMonth() + 1
  let day = date.getDate()
  let now = year + "-" + mon + "-" +day
  return now
}
const day = date()
articleForm.value.createDate = day
const addArticle = async () => {
  const {title, content, createDate} = articleForm.value
  const res = await createArticle({title, content, createDate})
  if (res.code == 200) {
    ElMessage({type: 'success', message: res.message})
    setTimeout(() => location.reload(), 2000)
  } else {
    ElMessage({type: 'error', message: res.message})
  }
}
</script>
<style scoped>
.personal {
  display: flex;
  flex-direction: row;
}
</style>